<template>
  <div class="matchground">
    <div class="row">
      <div class="col-4">
        <div class="user-photo">
          <img :src="$store.state.user.photo">
        </div>
        <div class="user-username">
          {{$store.state.user.username}}
        </div>
      </div>

      <div class="col-4">
        <div class="user-select-bot">
          <select v-model="selected_bot" class="form-select" aria-label="Default select example">
            <option value="-1">御驾亲征</option>
            <option v-for="bot in bots" :key="bot.id" :value="bot.id">
              派{{bot.title}}出战
            </option>

          </select>
        </div>
      </div>

      <div class="col-4">
        <div class="user-photo">
          <img :src="$store.state.pk.opponent_photo">
        </div>
        <div class="user-username">
          {{$store.state.pk.opponent_username}}
        </div>
      </div>
      <div class="col-12" style="text-align: center; padding-top: 15vh">
        <button @click="click_match_btn" type="button" class="btn btn-warning btn-lg">{{match_btn_info}}</button>
      </div>

    </div>
  </div>
</template>

<script setup>

import {ref} from "vue";
import {useStore} from "vuex";
import $ from "jquery";
  let match_btn_info=ref("开始匹配")
  const store=useStore()
  let bots = ref([]);
  let selected_bot = ref("-1");

  const refresh_bots = ()=>{
    $.ajax({
          url:"http://127.0.0.1:3000/user/bot/getlist/",
          type:"get",
          headers:{
            Authorization: "Bearer "+store.state.user.token,
          },
          success(resp){
            bots.value=resp;
          },
        },
    )
  }
  refresh_bots();

  const click_match_btn=()=>{
    if(match_btn_info.value==="开始匹配"){
      console.log("选择的botid是：",selected_bot.value);
      match_btn_info.value="取消";
      store.state.pk.socket.send(JSON.stringify({
            event:"start-matching",
            bot_id: selected_bot.value,
          }))
    }else {
      match_btn_info.value="开始匹配";
      store.state.pk.socket.send(
          JSON.stringify({
            event:"stop-matching",
          })
      )
    }
  }

</script>



<style scoped>

  div.matchground{
    width: 60vw;
    height: 70vh;
    /* background-color: lightblue; */
    margin: 40px auto;
    background-color: rgba(50,50,50,0.5);
  }

  div.user-photo{
    padding-top:10vh;
    text-align: center;
  }

  div.user-photo>img{
    /*padding-top: 20vh;*/
    border-radius: 50%;
    width: 20vh;
  }

  div.user-username{
    color: white;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    padding-top: 2vh;
  }

  div.user-select-bot {
    padding-top:20vh ;
  }

  div.user-select-bot>select {
    width: 60%;
    margin: 0 auto;
  }
</style>
